/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-14 10:33:42
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-19 15:03:57
 */
import { lazy, Suspense} from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import NotFound from '@/pages/NotFound/NotFound'
import './App.css'
import history from '@/utils/history'

import { getToken } from '@/utils/storage'
// import Login from './pages/Login/Login.jsx'
// import Layout from './pages/Layout/Layout.jsx'

// 导入页面组件
const Login = lazy(() => import('./pages/Login/Login'))
const Layout = lazy(() => import('./pages/Layout/Layout'))
/* 权限组件的封装 */
function PrivateRoute({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={() => {
        /* localStorage */
        var token = getToken() && getToken().token
        return token ? (
          <Component></Component>
        ) : (
          <Redirect to="/login"></Redirect>
        )
      }}
    ></Route>
  )
}


export default function App() {
  /* redux */
  // const token = useSelector((state) => state.login.token)
  // console.log(token, 666)
  return (
    // <BrowserRouter >
    <Router history={history}>
      <Suspense  fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }>
      <div className="app">
        <Switch>
          <Redirect exact from="/" to="/layout/home"></Redirect>
          <Route path="/login" component={Login}></Route>
          {/* <Route path="/layout" render={()=>{
            return token?<Layout></Layout>:<Redirect to="/login"></Redirect>
          }}></Route> */}
          {/* <Route path="/layout" component={Layout}></Route> */}
          <PrivateRoute component={Layout} path="/layout"></PrivateRoute>
          {/* 增加一个404 */}
          <Route component={NotFound}></Route>
        </Switch>
      </div>
      </Suspense>
    </Router>
  )
}
